<template>
  <div class="wordbooks-pages">
    <van-nav-bar title="测试" left-arrow @click-left="goBack" />
    <VocabularyBook @clickChange="testChange"/>
    <!-- 选择单词数量 -->
    <van-popup v-model:show="selTestNumPopup" round position="bottom">
      <van-picker
        :columns="columns"
        @cancel="selTestNumPopup = false"
        @confirm="addWords"
      />
    </van-popup>
  </div>
</template>

<script setup>
import VocabularyBook from '../components/VocabularyBook.vue'
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  wordsCreate,
  getUserWordSet,
  updateWorkds,
  deleteWorkds,
} from "../api/words";
const selTestNumPopup = ref(false);
const router = useRouter();
const wordbooks = ref([]);
const columns = ref([
  {
    test: "1",
    label: "1个单词",
  },
]);
onMounted(() => {
  var i = 1;
  do {
    columns.value.push({
      text: i + "个单词",
      value: i,
    });
    i += 3;
  } while (i < 50);
});
const test_id = ref(null);

const showAddDialog = ref(false);
const newWordbookName = ref("");
const newWordbookCoverUrl = ref("");

const addWords = (selectedValues) => {
  selTestNumPopup.value = false;
  router.push({
    path: "/testStart",
    query: {
      test_id: test_id.value,
      test_num: selectedValues.selectedValues[0],
    },
  });
};
const testChange = (id) => {
  selTestNumPopup.value = true;
  test_id.value = id;
};

const goBack = () => {
  router.back();
};

const removeWordbook = (id) => {
  // 删除单词本逻辑
  showConfirmDialog({
    title: "删除",
    message: "是否删除该单词本？",
  })
    .then(async () => {
      const res = await deleteWorkds({ id, user_id: 1 });
      console.log(res);
      showNotify({
        type: res.success ? "success" : "danger",
        message: res.message,
      });
      if (res.success) {
        const index = wordbooks.value.findIndex((book) => book.id === id);
        if (index !== -1) {
          wordbooks.value.splice(index, 1);
        }
      }
    })
    .catch(() => {
      // on cancel
    });
};

const editWordbook = (id) => {
  // 编辑单词本逻辑
  console.log("编辑单词本", id);
};

const addWordbook = async () => {
  // 新增单词本逻辑
  if (newWordbookName.value && newWordbookCoverUrl.value) {
    const res = await wordsCreate({
      wordlist: 1,
      name: newWordbookName.value,
      img: newWordbookCoverUrl.value,
      user_id: 1,
    });
    console.log(res);
    // const newId = Math.max(0, ...wordbooks.value.map((book) => book.id)) + 1; // 生成新ID
    // wordbooks.value.push({
    //   id: newId,
    //   name: newWordbookName.value,
    //   coverUrl: newWordbookCoverUrl.value,
    // });
    newWordbookName.value = ""; // 清空输入
    newWordbookCoverUrl.value = ""; // 清空输入
    showAddDialog.value = false; // 关闭弹出层
  }
};
</script>

<style scoped>
.wordbooks-page {
  padding: 10px;
}

.wordbook-list {
  margin-bottom: 16px;
}

.wordbook-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.wordbook-cover {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.wordbook-name {
  text-align: center;
  font-weight: bold;
  padding: 10px;
}

.card-actions {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

.add-wordbook-btn {
  margin: 0 auto;
  display: block;
  width: 90%;
}

.add-wordbook-form {
  padding: 16px;
}
</style>

<style>
.wordbook-list .van-cell__value {
  display: flex;
  align-items: center;
}
</style>
